<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    html, body{
        height: 100%; width: 100%; padding: 0;
    }
    body{
        background: url('/Public/game/images/ep02/back1.jpg') center no-repeat; background-size: 100% 100%;
    }
    #main {
        display: flex; flex-direction: column; align-items: center;justify-content: center; height: 100%;;
    }
    h1{
        font-size: 3rem;margin-top:10vh;height: 50vh;width: 60vw; align-items: center;justify-content: center; display: flex; 
    }
    h1 img{
        object-fit: contain; width: 100%; height: 100%;
    }
    a{
       margin-top: 5vh; width:30vh; height: 10vh;
    }
    a img{
        height: 100%; width: 100%;object-fit: contain;
    }
    a:active img{
        transform: scale(0.9);
    }

</style>
<body>
    <div id="main">
        <h1 id="clue"></h1>
        <a href="/Home/Trial/index">
            <img src="/Public/game/images/ep02/btn_back.png" alt="" />
        </a>
    </div>
</body>
<script>
    console.log(window.location.href);
    function getUrlParams(url) {
        const searchParams = new URLSearchParams(url.split('?')[1]);
        const params = {};
        for (const [key, value] of searchParams.entries()) {
            params[key] = value;
        }
        return params;
    }
    let params = getUrlParams(window.location.href);
    $('a').attr('href','/Home/Trial/index?id=' + params.id)
    function getClue(){
        $.ajax({
            url:'/Home/Trial/get_clue?id=' + params.id,
            type:'get',
            success:function(res){
                console.log(res);
                if(res.data.status == 'clue'){
                    if(res.data.clue.type == 'text'){
                        $('#clue').text(res.data.clue.content)
                    }
                    if(res.data.clue.type == 'image'){
                        $('#clue').html('<img src="' + res.data.clue.content + '" >') 
                    }
                    
                }
                if(res.data.status == 'index'){
                    window.location.href = '/Home/Trial/index?id=' + params.id;
                }
            } 
        }) 
    }
    getClue()
    setInterval(()=>{
        getClue()
    }, 1000)
</script>
</html>